<!DOCTYPE html>
<!-- Reader -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reader_register.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        function register(){
            var name = $("[name=name]").val();
            var phone = $("[name=phone]").val();
            var email =$("[name=email]").val();
            var password=$("[name=password]").val();
            if(name == "" || phone == ""||email == ""||password == ""){
                $("#message").html("The input cannot be empty!");
                $(".tanchuceng").css("display","block");
            }else{
                $.ajax({
                    url:"/read_register",
                    type:"post",
                    data:{
                        "name":name,
                        "phone":phone,
                        "email":email,
                        "password":password
                    },
                    success:function (data) {
                        if(data == "yes" || data == "no2"){
                            window.location.href="/payDep?phone=" + phone;
                        }else if (data == "no1"){
                            $("#message").html("You have submit the request!");
                            $(".tanchuceng").css("display","block");
                            setTimeout(function () {
                                window.location.href = "/readerlogin";
                            },2000)
                        }else if(data == "no3"){
                            $("#message").html("The phone has been used!");
                            $(".tanchuceng").css("display","block");
                            setTimeout(function () {
                                window.location.href = "/readerlogin";
                            },2000)
                        }
                    }
                })
            }
        }
        function exit(){
            $(".tanchuceng").css("display","none");
        }
    </script>
</head>
<body>
    <div class="main clearfix">
        <header class="header clearfix">
            <i class="iconfont icon-yun"></i>
            <i>Library</i>
        </header>
        <div class="content">
            <div id="photo">
                <i class="iconfont icon-yonghu"></i>
            </div>
            <div class="login clearfix">
                <div class="name">
                    <i> Name </i>
                    <p>
                        <input placeholder="Please input your name" type="text" name="name" >
                    </p>
                </div>
                <div class="phone">
                    <i> Phone </i>
                    <p >
                        <input placeholder="Enter your phonenumber" type="text" name="phone" >
                    </p>
                </div> 
                <div class="email">
                    <i> E-mail</i>
                    <p>
                        <input placeholder="Please input your email" type="text" name="email" >
                    </p>
                </div>
                <div class="password">
                    <i>Password</i>                                                                                
                    <p>
                        <input placeholder="Enter your password" type="password" name="password" >
                    </p>
                </div>
                <button id="btn" onclick="register()">Complete</button>
            </div>
        </div>
        <footer class="footer">
            <div class="mandarin">
                <img src="images/mandarin.png" alt="">
            </div>
            <p>Shan ICP number18018134 | Powered by 1713011</p>
        </footer>
    </div>
    <div class="tanchuceng">
        <div class="msg">
            <div class="exit" onclick="exit()">x</div>
            <p id="message"></p>
        </div>
    </div>
</body>
</html>